<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    :immediate-check="false" 
    @load="onLoad"
  >
    <CommentItem 
    v-for="(item,index) in list" 
    :key="index" 
    :comment='item'
    @reply-click="$emit('reply-click',$event)"
    >
    </CommentItem>
  </van-list>
</template>
<script>
import CommentItem  from './comment-item.vue'
import {getComments} from "@/api/comment";
export default {
  name: "CommentList",
  components: {
    CommentItem
  },
  props: {
    source: {
      type: [Number, String, Object],
      required: true
    },
    // 评论列表
    list:{
      type:Array,
      default:()=>[]
    },
    // 新增type 判断是文章还是评论
    type:{
      type:String,
      // 自定义 Prop  数据验证
      validator(value){
        return ['a','c'].includes(value)
      },
      default:'a'
    }
  },
  data() {
    return {
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      offset: null,
      limit: 20
    };
  },
  created(){
    this.loading=true
      this.onLoad()
  },
  methods: {
    async onLoad () {
      try {
        const { data } = await getComments({
          type: this.type, //评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
          source: this.source.toString(), //源id，文章id或评论id
          offset: this.offset, //获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
          limit: this.limit //获取的评论数据个数，不传表示采用后端服务设定的默认每页数据量
        });
        const {results}=data.data
        this.list.push(...results)
        // 把文章评论的总数量传递给 父组件 
        this.$emit('onload-success', data.data);
        this.loading=false
        // 判断是否有未加载的数据
        if(results.length){
          this.offset=data.data.last_id
        }else{
          this.finished =true
        }
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>
